<template>
  <div class="container">
    <!-- 首页顶部搜索 -->
    <div class="search">
    <search></search>
    </div>
    <!-- 列表内容 -->
    <div class="content">
      <scroll-view scroll-y class="left">
        <div class="menu-item" :class="{active:index === currentIndex}" v-for="(item,index) in menus" :key="index"
        @tap="handleChange(index)"
        >
          <span>{{item.cat_name}}</span>
        </div>
      </scroll-view>
      <scroll-view scroll-y class="right">
        <div class="right-column" v-for="(item, index) in rightData" :key="index">
          <div class="right-title">
            <span>/</span>
            {{item.cat_name}}
            <span>/</span>
          </div>

          <div class="wares">
             <div  
              v-for="(subItem, subIndex) in item.children" 
              :key="subIndex"
               @tap="handleNavigate(subItem.cat_name)"
              class="ware-item">
                  <img :src="'https://itjustfun.cn/' + subItem.cat_icon" mode="aspectFill"/>
                  <span>{{subItem.cat_name}}</span>
              </div>
          </div>
        </div>
      </scroll-view>
    </div>

  </div>
</template>

<script>
import Search from "../../components/search"
import request from "../../utils/request.js"
export default {
  components: {
    Search
  },
  data () {
    return {
      menus:[],
      currentIndex: 0,
      rightData:[]
    }
  },
  mounted () {
    // 请求分类页数据
    request.get("https://www.itjustfun.cn/api/public/v1/categories").then(res =>{
      const {data} = res.data;
      // 把所有数据赋值给menus
      this.menus = data;
      console.log(res);
      // 把数组的第一项children赋值给右边的数据
      this.rightData = data[0].children
      console.log(this.rightData);
    })
  },
  methods: {
    // 根据index切换左侧菜单
    handleChange(index){
      this.currentIndex = index;
      // 根据下标找到总数据某个元素
      const data = this.menus[index];
      // 当前元素下的children就是整个元素下的数据
      this.rightData = data.children;
    },
    // 点击分页每一项时触发
    handleNavigate(name){
      wx.navigateTo({
        url:`/pages/goods_list/main?keyword=${name}`
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "style.scss"
</style>
